<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content="mock,Mock,在线mock服务,前后端分离,在线mock,在线接口Mock平台"/>
    <meta name="description" content="Bluewind Mock 是一个可视化, 易操作的能快速生成模拟数据的再次按Mock服务."/>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <!-- 引入element-ui的css -->
    <link rel="stylesheet" th:href="@{/lib/element-ui/theme-chalk/index.css}">
    <link rel="stylesheet" th:href="@{/css/public.css}">

    <!-- 引入vue和vue-i18n的js -->
    <script th:src="@{/lib/vue/vue.min.js}"></script>
    <script th:src="@{/lib/vue/vue-i18n.js}"></script>
    <!-- 引入axios和qs的js -->
    <script th:src="@{/lib/axios.min.js}"></script>
    <script th:src="@{/lib/qs.min.js}"></script>
    <!-- 引入element-ui的js -->
    <script th:src="@{/lib/element-ui/index.js}"></script>
    <!-- 引入公共js -->
    <script th:src="@{/js/public.js}"></script>
    <title>Mock平台</title>

    <style>
        html, body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="app" style="height: 100%;">
    <el-container style="height: 100%;">
        <el-header style="padding: 0;">
            <el-row style="background-color:#00162A; height: 60px">
                <el-col :span="8">
						<span style="color: white;font-size: 30px;font-weight: bold;line-height: 60px;margin-left: 20px;cursor: pointer"
                              @click="freshWeb">
							<i class="el-icon-platform-eleme"></i>&nbsp;Mock平台
						</span>
                </el-col>
                <el-col :span="14">
                    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
                             background-color="#00162A" text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="myproject">
                            <span style="font-weight: bold">我的项目</span>
                        </el-menu-item>
                        <el-menu-item index="mydata">
                            <span style="font-weight: bold">数据</span>
                        </el-menu-item>
                        <el-menu-item index="myother">
                            <span style="font-weight: bold">其他</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="2" style="padding-top: 10px">
                    <el-dropdown @command="handleDropdown">
                        <div>
                            <i class="el-icon-caret-bottom" style="color: white;float: right;margin-top: 15px;cursor: pointer"></i>
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                       style="float: right;margin-right: 1px;cursor: pointer">
                            </el-avatar>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="invitationCode">邀请码</el-dropdown-item>
                            <el-dropdown-item command="exit">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>

        <el-main style="background-color: #EFF3F5;">

            <iframe width="100%" height="99%" frameborder="no" border="0" marginwidth="0" marginheight="0" :src="optionsHref">

            </iframe>

        </el-main>

    </el-container>
</div>
</body>

<script type="text/javascript" th:inline="javascript">
    Util.ctx = /*[[@{/}]]*/'';

    new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: 'myproject',
                optionsHref: Util.ctx + 'project/index',
                items: [],
            }
        },
        methods: {
            freshWeb: function () {
                window.location.reload();
            },
            handleSelect: function (key, keyPath) {
                if (key === 'myproject') {
                    this.optionsHref = Util.ctx + 'project/index'
                } else if (key === 'mydata') {
                    this.$message('拼命开发中！');
                } else if (key === 'myother') {
                    this.optionsHref = 'https://www.runoob.com/'
                }
            },
            handleDropdown: function (command) {
                if (command === 'exit') {
                    $axios({
                        method: 'get',
                        url: Util.ctx + "logout"
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(()=> {
                                window.location.href = Util.ctx + "login";
                            }, 600);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch((res) => {
                        console.log(res);
                    })
                } else if (command === 'userinfo') {
                    this.$message('click on item ' + command);

                } else if (command === 'invitationCode') {
                    $axios({
                        method: 'get',
                        url: Util.ctx + "getInvitationCode"
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$alert('您的推荐码为: ' + res.data.data, '推荐码', {
                                confirmButtonText: '确定',
                                center: true,
                                callback: action => {

                                }
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch((res) => {
                        console.log(res);
                    })
                }
            },
        },
        mounted: function() {

        }
    })

</script>

</html>